<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--导入JQuery核心类库-->
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<!--导入easyui类库 -->
	<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
	<!--导入默认主题css文件-->
	<link id="easyuiTheme" rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css" />
	<!--导入图标-->
	<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css" />
	<!--导入国际化信息文件-->
	<script src="js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
	
	<!--在页面引入ztress-->
	<script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script>
	<link rel="stylesheet" type="text/css" href="js/ztree/zTreeStyle.css" />
		<title>练习二</title>
		<script type="text/javascript">
			$(function(){//页面加载完成后  执行该方法
				//通过超链接的点击事件  添加选项卡 
				$("#czbkLink").click(function(){
					//添加一个新的   选项卡
					$("#mytabs1").tabs('add',{
						title:'传智播客',
						content:'传智播客   黑马程序员'
					})
				})
				
				//编写树形菜单
				//1.开启 简单数据格式支持
				var setting = {
					data: {
						simpleData:{
							enable: true //支持简单json数据格式
						}
					},
					//为每一个树形节点 添加点击事件
					callback:{
						onClick:function(e,treeId,treeNode,clickFlag){
								// 开启一个新的tab页面
							var content = '<div style="width:100%;height:100%;overflow:hidden;">'
									+ '<iframe src="'
									+ treeNode.page
									+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
							//判断  没有page属性,则不添加选项卡
							if(treeNode.page){
								//如果选项卡已经打开，则选中
								if($("#mytabs1").tabs('exists',treeNode.name)){//判断选项卡是否已经打开
									//选中选项卡          
									$("#mytabs1").tabs('select',treeNode.name);
								}else{//选项卡没有打开 ，则需要打开一个选项卡
									$("#mytabs1").tabs('add',{
										title:treeNode.name,
										content:content,
										closable:true
									});
								}
							}
						}
					}	
				};
				//2.编写树形菜单数据
				var zTreeNodes = [
					{id:1,pId:0,name:"父节点一"},
					{id:11,pId:1,name:"传智播客",page:"http://www.itcast.cn/"},
					{id:12,pId:1,name:"京东",page:"https://www.jd.com/"},
					{id:2,pId:0,name:"父节点二"},
					{id:21,pId:2,name:"子节点一"},
					{id:22,pId:2,name:"子节点二"}
				];
				//3.生成菜单
				 $.fn.zTree.init($("#baseMenu"), setting, zTreeNodes);
			
				
				
				
				
				
				
				
				
				
			})	
		</script>
	</head>
	<body ><!--使用easyui构建整个页面框架    即 layout 布局-->
		<div id="cc" class="easyui-layout" data-options="fit:true">
			
			<div data-options="region:'north'" style="height: 100px;">
				<div><img src="images/logo.png" style="height: 60px;"></img></div>
				
			</div>
			<div data-options="region:'west',title:'传智播客管理系统'" style="width: 100px;">
				<!--设置折叠面板-->
				<div class="easyui-accordion" data-options="fit:true">
					<div data-options="title:'基础菜单'">
						<!--设置一个超链接   通过点击 添加新的选项卡-->
						<a href="javascript:void(0)" id="czbkLink">传智播客</a>
					</div>
					<div data-options="title:'系统菜单'">
						<!--设置树形菜单-->
						<ul id="baseMenu" class="ztree"></ul>
						
						
					</div>
					<div data-options="title:'其他菜单'">面板三</div>
				</div>			
			</div>
			<div data-options="region:'center',title:'传智播客管理系统'" >
				<!--设置  中心区域   选项卡面板  tabs-->
				<div  id="mytabs1" class="easyui-tabs" fit="true">
					<div data-options="title:'选项卡面板一',closable:true">选项卡面板一</div>
					<div data-options="title:'选项卡面板二',closable:true">选项卡面板二</div>
				</div>
			</div>
			
			<div data-options="region:'south'" style="height: 100px;">南部区域</div>
		
		</div>	
	</body>
</html>
